import { For, Component } from "solid-js";
import { doState, useWorkPlanStore } from "./store";
import style from "./index.module.scss";
import { DelIcon } from "./icons";
import { cloneDeep } from "lodash-es";
type workListProp = {
  id: string;
};
export let useableState: { label: string; value: doState }[] = [
  {
    label: "正在处理",
    value: "doing",
  },
  {
    label: "处理完毕",
    value: "done",
  },
  {
    label: "暂停",
    value: "pause",
  },
];

export let WorkList: Component<workListProp> = props => {
  let { id } = props;
  let { setWorkStore, workStore, getWorkPlanById } = useWorkPlanStore();
  let list = getWorkPlanById(id);
  return (
    <div class={style["work-plan"]}>
      <For each={workStore[id]}>
        {(one, i) => (
          <div class={style["work-plan-item"]}>
            <span class={style["work-plan-item-index"]}>{i() + 1}</span>
            <textarea
              title="工作内容"
              placeholder="请输入工作内容"
              value={one.text}
              onChange={e => {
                setWorkStore(id, i(), "text", e.currentTarget.value);
              }}
            />
            <div class={style["work-plan-item-state"]}>
              <select
                title="处理情况"
                value={one.doState}
                onChange={e => {
                  let val = e.currentTarget.value as doState;
                  setWorkStore(id, i(), "doState", val);
                }}
              >
                <For each={useableState}>
                  {one => <option value={one.value}>{one.label}</option>}
                </For>
              </select>
              <input
                style={{
                  width: "100px",
                }}
                value={one.schedulePercent}
                placeholder="请输入百分比"
                max={100}
                min={0}
                type="number"
                onChange={e => {
                  let val = e.currentTarget.value;
                  if (Number(val) > 100) {
                    val = "100";
                    e.currentTarget.value = val;
                  }
                  if (Number(val) < 0) {
                    val = "0";
                    e.currentTarget.value = val;
                  }
                  setWorkStore(id, i(), "schedulePercent", () => val);
                }}
              ></input>
              <span class={style["work-plan-item-state-percent"]}>%</span>
              <DelIcon
                class={style["work-plan-item-del"]}
                height="20"
                onClick={() => {
                  setWorkStore(id, arr => {
                    arr.splice(i(), 1);
                    return cloneDeep(arr);
                  });
                }}
              ></DelIcon>
            </div>
          </div>
        )}
      </For>
      <button
        type="button"
        onClick={() => {
          setWorkStore(id, [
            ...list(),
            {
              text: "",
              doState: "",
              schedulePercent: "",
            },
          ]);
        }}
      >
        新增
      </button>
    </div>
  );
};
